@import '../v.less';

.container {
  height: 100vh;
  :global {
    .header {
      height: 50px;
      background-color: @primary;
      color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      // padding: 0 20px;
      overflow: hidden;
      -webkit-app-region: drag;

      .logo {
        font-size: 30px;
        padding-left: 20px;
        font-family: font-poem-2527;
        height: 50px;
        line-height: 50px;
        flex-grow: 1;
        .version {
          font-size: 12px;
          color: #f77171;
          font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
            'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif,
            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
        }
      }
      .action {
        -webkit-app-region: no-drag;
        padding-right: 20px;
        .anticon,
        .fa-icon {
          cursor: pointer;
          margin-left: 8px;
        }
      }

      .am-search {
        margin-right: 50px;
        -webkit-app-region: no-drag;
        background-color: transparent;
        .am-search-cancel {
          color: #ffffff;
          cursor: pointer;
        }
        * {
          -webkit-app-region: no-drag;
        }
        min-width: 350px;
      }
    }

    .main {
      display: flex;
      justify-content: space-between;
      height: ~'calc(100vh - 50px - 70px)';
      .nav {
        position: relative;
        width: 220px;
        background-color: #f5f5f7;
        height: ~'calc(100vh - 50px - 70px)';

        ul {
          padding: 15px 0px;
          list-style: none;
          width: 220px;
          li {
            &.my {
              padding-left: 25px;
            }
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 40px;
            padding: 0px 10px;
            color: #111111;
            cursor: pointer;
            img {
              height: 40px;
              width: 40px;
              object-fit: cover;
              margin-right: 6px;
            }
            border-left: 3px solid transparent;
            span {
              margin-right: auto;
            }
            &.active {
              background-color: rgb(230, 231, 234);
              color: #000000;
              border-left: 3px solid @primary;
            }
            .anticon {
              margin-right: 5px;
            }

            .btn {
              cursor: pointer;
            }
          }
        }
      }
      .content {
        flex-grow: 1;
        position: relative;
        background-color: white;
        overflow-y: auto;
      }
    }
  }
}
